<template>
	<div class="goods-sort" id="goods-sort">
		<!--顶部搜索栏-->
		<van-skeleton :row="1" :row-width="['100%']" :loading="loading">
			<search-bar ref="searchBar"></search-bar>
		</van-skeleton>

		<!--分类内容-->
		<div class="classify">
			<!--侧边筛选栏-->
			<side-bar ref="sideSelect" :list="firstClassifyList" @refresh="refresh" :loading="loading"></side-bar>

			<!--内容栏-->
			<classify-info ref="classifyInfo"></classify-info>
		</div>
	</div>
</template>

<script>
import { Skeleton } from 'vant';
import { SearchBar, SideBar, ClassifyInfo } from './components/goodsSort';
export default {
	name: 'goods-sort',
	components: {
		SearchBar,
		SideBar,
		ClassifyInfo,
		'van-skeleton': Skeleton
	},
	data() {
		return {
			loading: false,
			firstClassifyList: []
		};
	},
	created() {
		this.getFirstClassifyList();
	},
	mounted() {
		document.getElementById('goods-sort').style.height = (document.documentElement.clientHeight - 45) + 'px';
	},
	methods: {
		// 刷新内容
		refresh(params) {
			this.$refs.classifyInfo.getNextClassifyList(params);
		},
		// 获取一级分类列表
		getFirstClassifyList() {
			// 获取一级分类
			this.loading = true;
			this.$service.shopping.classify.classtab().then(res => {
				this.firstClassifyList = res;
				this.loading = false;
				// 根据一级分类获取下级分类
				this.$refs.classifyInfo.getNextClassifyList({ cid: res[0].cid });
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-sort {
	width: 100%;
	@include flexBox(null, null, column);
	.van-skeleton {
		padding: 16px 48px;
		background: $color-white;
		.van-skeleton__content {
			.van-skeleton__row {
				height: 64px;
				border-radius: 50px;
			}
		}
	}
	.classify {
		display: flex;
		flex: 1;
		overflow: auto;
	}
}
@supports (bottom: env(safe-area-inset-bottom)) {
	.goods-sort {
		padding-bottom: env(safe-area-inset-bottom);
	}
}
</style>
